<template>
    <view class="container">

        <!-- 内容区域 -->
        <view class="content" v-show="activeIndex === 0">
            <!-- Logo -->
            <view class="logo">
				<image src="/static/icon-android-xxxhdpi.png" mode=""></image>
            </view>

            <!-- 标题 -->
            <view class="title">天顺路桥</view>
            <view class="subtitle">您的掌上移动管家</view>

            <!-- 登录按钮 -->

        </view>
        <!-- 账号输入框 -->
        <view class="input-box">
            <view class="title-box" v-show="activeIndex == 1">
                <view class="logo">
					<image src="/static/icon-android-xxxhdpi.png" mode=""></image>
                </view>
                <view class="title">欢迎登录 天顺路桥</view>
            </view>
            <view class="input-box">
                <view class="label" v-show="activeIndex == 1">账号密码</view>
                <uv-input v-model="account" placeholder="请输入账号" border="bottom" v-show="activeIndex == 1"></uv-input>
                <!-- eye-off-outline -->
                <view class="password-input" v-show="activeIndex === 1">
                    <uv-input v-model="password" placeholder="请输入密码" border="bottom"
                        :type="show ? 'password' : 'text'"></uv-input>
                    <uv-icon v-show="password" class="icon" :name="show ? 'eye' : 'eye-off-outline'"
                        @click="isShow"></uv-icon>
                </view>
            </view>

        </view>

        <uv-button v-if="activeIndex <= 1" class="but" shape="circle" type="primary" :text="'登录'"
            @click="submit"></uv-button>
        <!-- 隐私协议弹窗 -->
        <uv-overlay :show="markShow">
            <view class="warp">
                <view class="rect" @click.stop>
                    <text class="modal-title">用户服务协议和隐私政策</text>
                    <text
                        class="modal-text">{{formData.content||''}}</text>
                    <view class="agreement-row">
                        <uv-checkbox-group>
                            <uv-checkbox @change="changeBox" label="我已阅读以上协议"></uv-checkbox>
                        </uv-checkbox-group>

                        <!-- <text class="agreement-text">我已阅读以上协议</text>	 -->
                    </view>
                    <uv-button style="margin-top: 30rpx;" text="同意并继续" shape="circle" type="primary"
                        @click="agreement"></uv-button>
                </view>
            </view>
        </uv-overlay>
    </view>
</template>

<script>
import {
    Login,
	getinfoForLogin
} from '@/utils/app.js'
import { BASEURL } from '@/utils/request.js'
import {
    useUserStore
} from '@/store/index.js'
export default {
    data() {
        return {
            activeIndex: 0,
            account: '', //ts_admin
            show: true,
            password: '',
            markShow: false,
            isAgreed: false,
			formData:{},
			userinfo:{}

        };
    },
    setup() {
        const userStore = useUserStore()
        return {
            userStore
        }
    },
	// onLoad() {
	// 	console.log(1111);
		
	// },
	onShow() {
		const value = uni.getStorageSync('isAgreed');
		const info = JSON.parse(value)
		console.log(info);
		this.userinfo = info
		
	},
    methods: {
        submit() {
			// if(this.activeIndex == 0){
			// 	getUserInfo({type:4}).then(res=>{
			// 		if (res && res.code == 200) {
			// 		    this.formData = res.data
			// 		}
			// 	})
			// }

            if (this.activeIndex === 1) {
                if (this.account == '') {
                    return uni.showToast({
                        title: '请输入账号',
                        icon: 'none'
                    })
                }
                if (this.password == '') {
                    return uni.showToast({
                        title: '请输入密码',
                        icon: 'none'
                    })
                }
				if(this.userinfo.isAgreed && this.userinfo.username == this.account){
					this.isAgreed = true
					this.agreement()
				}else{
					
					uni.request({
					    url: BASEURL+'/system/protocol/infoForLogin', //仅为示例，并非真实接口地址。
					    data: {
					        type: 4,
							username:this.account
					    },
					    success: (res) => {
					        console.log(res.data);
							if(res.data.code==200){
								this.formData = res.data.data?res.data.data:''
								
								this.markShow = true
							}else{
								this.activeIndex = 1
								return uni.showToast({
								    title: '请勿重复操作',
								    icon: 'none',
									
								})
							}
					        // this.text = 'request success';
							
					    }
					});
				}
				

                
            }
            if (this.activeIndex >= 2) return
            this.activeIndex++
        },
        isShow() {
            this.show = !this.show

        },
        agreement() {
            if (!this.isAgreed) {
                uni.showToast({
                    title: '请先阅读并同意协议',
                    icon: 'none'
                })
                return
            }
            this.markShow = false
            //增加loading
            uni.showLoading({
                title: '登录中...',
                mask: true
            })
            Login({
                username: this.account,
                password: this.password
            }).then(res => {
                uni.hideLoading()
                if (res.code == 200) {
                    uni.showToast({
                        title: '登录成功',
                        icon: 'success'
                    })
                    setTimeout(() => {
                        uni.reLaunch({
                            url: '/pages/facility/index'
                        })
                    }, 0)
					const data = JSON.stringify({isAgreed:true,username:this.account})
					uni.setStorageSync('isAgreed', data);
                    this.userStore.setToken(res.token)
                    return Promise.resolve(res)
                } else {
                    uni.showToast({
                        title: res.msg || '登录失败',
                        icon: 'none'
                    })
                    this.activeIndex = 0
                    this.account = ''
                    this.password = ''
                    return Promise.reject(res)
                }
            }).catch(err => {
                if (err) {
                    uni.showToast({
                        title: err.msg || '网络故障，请稍后再试',
                        icon: 'none'
                    })
                    this.activeIndex = 0
                    uni.reLaunch({
                        url: '/pages/login/index'
                    })
                }
            })

        },
        changeBox(e) {
            this.isAgreed = e
        }
    }

}
</script>

<style lang="scss" scoped>
.container {
    width: 100%;
    // height: 100vh;
    background: linear-gradient(180deg, #F2F4FA -3%, #F9FCFB 100%);
    padding-top: 250rpx;

    .bar-main {
        width: 100%;
        height: 80rpx;
    }

    .back-but {
        width: 100%;
        height: 80rpx;
        display: flex;
        align-items: center;
    }

    .icon {
        margin-left: 20rpx;
    }

    .bar-text {
        font-size: 36rpx;
        color: #FFFFFF;
    }

    .content {
        padding-top: 60rpx;
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .logo {
        width: 144rpx;
        height: 144rpx;
        border-radius: 24rpx;
        // background-color: #4980FF;
		
		image{
			width: 144rpx;
			height: 144rpx;
		}
    }

    .title {
        font-size: 72rpx;
        font-family: "Alibaba PuHuiTi 2.0";
        font-weight: 400;
        text-align: center;
        color: rgba(0, 0, 0, 0.85);
        margin-bottom: 20rpx;
    }

    .subtitle {
        font-size: 32rpx;
        text-align: center;
        font-family: "Alibaba PuHuiTi 2.0";
        font-weight: 400;
        color: #353535;
        margin-bottom: 120rpx;
    }

    .but {
        width: 560rpx;
        margin: 0 auto;
    }

    .title-box {
        margin-bottom: 120rpx;
        padding: 0 40rpx;
        display: flex;
        align-items: center;
        justify-content: center;

        .logo {
            width: 64rpx;
            height: 64rpx;
            border-radius: 10rpx;
            margin-right: 20rpx;
			image{
				width: 64rpx;
				height: 64rpx;
			}
        }

        .title {
            font-size: 56rpx;
            font-family: "Alibaba PuHuiTi 2.0";
            font-weight: 600;
            color: rgba(0, 0, 0, 0.85);
            margin-bottom: 0;
        }
    }

    .input-box {
        padding: 0 40rpx;
        margin-bottom: 128rpx;

        .label {
            font-size: 40rpx;
            font-family: "Alibaba PuHuiTi 2.0";
            font-weight: 500;
            color: rgba(0, 0, 0, 0.85);
            margin-bottom: 30rpx;
        }

        .password-input {
            position: relative;
            margin-top: 30rpx;

            .icon {
                position: absolute;
                right: 10rpx;
                top: 20rpx;

            }
        }
    }

    .warp {
        display: flex;
        align-items: center;
        justify-content: center;
        height: 100%;

    }

    .rect {
        width: 560rpx;
        height: 800rpx;
        border-radius: 20rpx;
        background-color: #fff;
        padding: 40rpx 46rpx 32rpx;
        display: flex;
        flex-direction: column;
    }

    .modal-title {
        font-size: 32rpx;
        font-family: "Alibaba PuHuiTi 2.0";
        font-weight: 600;
        color: rgba(0, 0, 0, 0.85);
        margin-bottom: 24rpx;
        text-align: center;
    }

    .modal-text {
        flex: 1;
        font-size: 28rpx;
        font-family: "Alibaba PuHuiTi 2.0";
        color: rgba(0, 0, 0, 0.85);
        line-height: 48rpx;
        margin-bottom: 32rpx;
    }

    .agreement-row {
        display: flex;
        align-items: center;
    }
}
</style>